<template>
  <div class="feedbox">
    <div class="content">
      <textarea placeholder="请填写您要留言的内容" v-model="content" rows="5" />
    </div>
    <div class="submit-btn" @click="getjyxcxxSavedata">提交反馈</div>
    <div class="history">
      <p>热门留言</p>
      <p v-show="!list.length">{{ "暂无内容" }}</p>
      <div class="item" v-for="(item, i) in list" :key="i">
        <div>
          <p>反馈日期：{{ item.createTime }}</p>
          <p>{{ item.content }}</p>
        </div>
        <div>
          <!-- <van-icon name="arrow" /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {jyxcxxSavedata, jyxcxxQuerydata4list, jyxcxxQuerydatajyxcxq} from '../assets/js/api';
export default {
  data() {
    return {
      content: '',
      list: '',
      dspToken: localStorage.dspToken
    };
  },
  mounted() {
    this.getJyxcxxQuerydata4list();
  },
  methods: {
    getJyxcxxQuerydata4list() {
      jyxcxxQuerydata4list().then(({data}) => {
        this.list = data;
      });
    },
    getjyxcxxSavedata() {
      jyxcxxSavedata({
        dspToken: this.dspToken,
        content: this.content
      }).then((res) => {
        this.content = '';
        this.getJyxcxxQuerydata4list();
        this.$toast('反馈成功');
      });
    },
    getjyxcxxQuerydatajyxcxq() {
      jyxcxxQuerydatajyxcxq().then(({data}) => {
        this.sfsmry = data.map(o => ({}));
      });
    }
  }
};
</script>

<style lang="less" scoped>
.feedbox {
  padding: 19px 25px 25px 21px;
  box-sizing: border-box;
  .content {
    height: 362px;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    textarea {
      width: 625px;
      font-size: 34px;
      padding: 37px 36px;
      border: none;
    }
    textarea ::placeholder {
      color: #bfbfbf;
    }
  }
  .submit-btn {
    width: 704px;
    height: 90px;
    background-color: #3198ed;
    box-shadow: 0px 5px 5px 0px rgba(89, 166, 250, 0.1);
    border-radius: 45px;
    margin: 36px auto;
    color: #ffffff;
    text-align: center;
    line-height: 90px;
    font-size: 36px;
    letter-spacing: 7px;
  }
  .history {
    p:first-child {
      color: #888888;
      font-size: 30px;
    }
    p:last-child {
      color: #333333;
      font-size: 34px;
    }
    .item {
      width: 704px;
      // height: 140px;
      padding: 36px 0;
      background-color: #ffffff;
      box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
      border-radius: 8px;
      margin: 0 auto;
      margin-top: 23px;
      position: relative;
      padding: 31px 30px 26px 33px;
      box-sizing: border-box;
      display: flex;
      &::before {
        content: "";
        width: 5px;
        // height: 140px;
        background-color: #3198ed;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
      }
      > div:first-child {
        flex: 1;
        p:first-child {
          color: #888888;
          font-size: 30px;
        }
        p:last-child {
          width: calc(100vw - 160px);
          color: #353535;
          font-size: 34px;
          // white-space: nowrap;
          // text-overflow: ellipsis;
          // overflow: hidden;
        }
      }
      > div:last-child {
        width: 50px;
        font-size: 34px;
        color: #b2b2b2;
        align-self: center;
        text-align: right;
      }
    }
  }
}
</style>
